<template>
	<view class="news">
		<uni-header :title="'我的消息'"></uni-header>
		<view class="news-body">
			<view class="news-list" v-for="item in newsData">
				<view class="news-content">{{item.content}}</view>
				<view class="" v-if="item.news_type ===2 || item.news_type === 3"
					:style="{'background-color': (item.news_type ===2?'cornflowerblue':'#F1F1F1')}"
					style="width: 48px; height: 30px; line-height: 30px; font-size: 15px; text-align: center;"
					@click="handle(item)">{{item.news_type === 2?'接受' : '已接受'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMessage,
		saveAgree
	} from "@/api/mine"
	export default {
		data() {
			return {
				newsData: []
			}
		},
		created() {
			this.getMessageData();
		},
		methods: {
			getMessageData() {
				getMessage({
					deviceId: this.$store.state.user.deviceId
				}).then(res => {
					console.log(res)
					this.newsData = res.news
				})
			},
			handle(item) {
				saveAgree({
					circle_id: item.circle_id,
					news_id: item.id
				}).then(res => {
					item.news_type = 3
				})
			}
		}
	}
</script>

<style lang="scss">
	.news-body {
		.news-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			margin-bottom: 5px;
			padding: 10px 15px;
			border: 1px solid #eee;

			.news-content {
				color: #999;
				width: 540rpx;
			}
		}
	}
</style>